<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2016/10/1
  Time: 21:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>西宁市民生工程货币化资金监管查询系统 - 登录</title>
    <link rel="stylesheet" href="/resources/style.css">
</head>
<body>
<%--

    username:<input type="text" name="username"/><br>
    password:<input type="text" name="password"/><br>
    <input type="hidden" name="service" id="service"/>
    <input type="submit" value="登录"/>
--%>

<form action="/login">
    <div class="login-wrapper">
        <div class="header_login">
            <a class="logo icon-logo--login" href="#" title="西宁市民生工程货币化资金监管查询系统">西宁市民生工程货币化资金监管查询系统</a>

            <div class="header_login_info">
                <%--<a href="javascript:;" class="download">
                    客户端下载
                    <span style="display: none;"><img src="/resources/images/loginqr.png"
                                                      alt=""></span>
                </a>--%>
                <a href="javascript:;" class="feedback">反馈</a>
                <%--<a href="javascript:;">帮助</a>--%>
            </div>
        </div>
        <div class="form-area-wrapper">
            <div class="title">账号登录</div>
            <div class="form-wrapper">
                <c:if test="${msg!=null}">
                    <div class="ant-row input-tip-text error">
                        <p><span>${msg}</span></p>
                    </div>
                </c:if>
                <div class="ant-row input-wrapper">
                    <div class="ant-row ant-form-item">
                        <div class="ant-form-item-control has-success">
                            <div class="flex flex-justify-start flex-align-stretch">
                                <div class="flex-item flex-align-center"><i class="x-icon x-icon-user"></i></div>
                                <div class="flex-item flex-align-center" style="-webkit-flex:2 0 auto;flex:2 0 auto;">
									<span class="ant-input-wrapper">
										<input type="text" name="username" placeholder="请输入用户名" value=""
                                               class="ant-input">
									</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="ant-row ant-form-item ant-form-item-with-help">
                        <div class="ant-form-item-control has-success">
                            <div class="flex flex-justify-start flex-align-stretch">
                                <div class="flex-item flex-align-center"><i class="x-icon x-icon-lock"></i></div>
                                <div class="flex-item flex-align-center" style="-webkit-flex:2 0 auto;flex:2 0 auto;">
									<span class="ant-input-wrapper">
										<input type="password" name="password" placeholder="请输入密码" value=""
                                               class="ant-input">
									</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="ant-row ant-form-item">
                        <div class="ant-form-item-control has-success">
                            <div class="flex flex-justify-start flex-align-stretch">
                                <div class="flex-item flex-align-center"><i class="x-icon x-icon-uncertified"></i></div>
                                <div class="flex-item flex-align-center" style="-webkit-flex:2 0 auto;flex:2 0 auto;">
									<span class="ant-input-wrapper">
										<input type="text" id="rand" name="rand" placeholder="请输入验证码" value=""
                                               class="ant-input">
									</span>
                                </div>
                                <div class="flex-item flex-align-center" style="position: absolute;right: 0;top: 0;">
                                    <img id="randImg" src="/validateCode" alt="" class="code">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <button type="submit" class="ant-btn ant-btn-danger submit-button"><span>登 录</span></button>
                <div class="ant-row-flex ant-row-flex-space-between ant-row-flex-middle links">
                    <div class="ant-col-12">
                        <a href="javascript:;" class="forgot">
                            <span>忘记密码?</span>
                        </a>
                    </div>
                    <!-- <div class="ant-col-12">
                        <a href="#"><span>注册 </span><i class="x-icon x-icon-circle-o-right"></i></a>
                    </div> -->
                </div>
            </div>
        </div>
    </div>
    <div class="footerOut">
        <div class="footerOutBg"></div>
        <%--<div class="m footer f12">
            <div class="l">
                &lt;%&ndash;<a href="#" target="_blank">关于我们</a>
                <br>&ndash;%&gt;
                Copyright © 2017 青海云联数据服务有限公司
            </div>
            <div class="r">
                <span> </span>
                <br>
                &lt;%&ndash;<a href="#" target="_blank">青海ICP备88888888号</a>&ndash;%&gt;
            </div>
        </div>--%>
        <!--页尾end-->
    </div>
    <div class="feedback-box fix-box">
        <div class="shadow"></div>
        <div class="ant-modal">
            <div class="ant-modal-content">
                <button aria-label="Close" class="ant-modal-close close">×</button>
                <div class="ant-modal-header">
                    <div class="ant-modal-title">用户反馈</div>
                </div>
                <div class="ant-modal-body">
                    <div class="ant-row" style="padding-top: 20px;">
                        <div class="ant-col-5">问题标题</div>
                        <div class="ant-col-19"><input type="text" value="" class="ant-input title title-wt"
                                                       name="title"></div>
                    </div>
                    <div class="ant-row">
                        <div class="ant-col-5">反馈人姓名</div>
                        <div class="ant-col-6"><input type="text" value="" class="ant-input name" name="name"></div>
                        <div class="ant-col-5 w70">联系方式</div>
                        <div class="ant-col-6"><input type="text" value="" class="ant-input tel" name="tel"></div>
                        <div class="ant-col-5 w70">所在单位</div>
                        <div class="ant-col-6"><input type="text" value="" class="ant-input company" name="company">
                        </div>
                    </div>
                    <div class="ant-row">
                        <div class="ant-col-5">详细描述</div>
                        <div class="ant-col-19"><textarea value="" class="ant-input content" name="content"></textarea>
                        </div>
                    </div>
                </div>
                <div class="ant-modal-footer">
                    <button type="button" class="ant-btn ant-btn-lg close"><span>取消</span></button>
                    <button type="button" class="ant-btn ant-btn-primary ant-btn-lg save"><span>确定</span></button>
                </div>
            </div>
        </div>
    </div>
    <input type="hidden" name="service" id="service"/>
</form>
<div class="msg-box fix-box">
    <div class="shadow"></div>
    <div class="ant-modal">
        <div class="ant-modal-content">
            <div class="ant-modal-body">
                <div class="ant-row">
                    请联系管理员修改
                </div>
                <button type="button" class="ant-btn ant-btn-primary ant-btn-lg msg-close"><span>关闭</span></button>
            </div>
        </div>
    </div>
</div>
<div class="tip"></div>

<script src="/resources/js/jquery-1.8.2.min.js"></script>
<script src="/resources/js/supersized.3.2.7.min.js"></script>
<script>
    jQuery(function ($) {
        $.supersized({
            // Functionality
            slide_interval: 4000,    // Length between transitions
            transition: 1,    // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
            transition_speed: 1000,    // Speed of transition
            performance: 1,    // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)

            // Size & Position
            min_width: 0,    // Min width allowed (in pixels)
            min_height: 0,    // Min height allowed (in pixels)
            vertical_center: 1,    // Vertically center background
            horizontal_center: 1,    // Horizontally center background
            fit_always: 0,    // Image will never exceed browser width or height (Ignores min. dimensions)
            fit_portrait: 1,    // Portrait images will not exceed browser height
            fit_landscape: 0,    // Landscape images will not exceed browser width

            // Components
            slide_links: 'blank',    // Individual links for each slide (Options: false, 'num', 'name', 'blank')
            slides: [    // Slideshow Images
                {image: '/resources/images/1.jpg'},
                {image: '/resources/images/2.jpg'},
                {image: '/resources/images/3.jpg'},
                {image: '/resources/images/4.jpg'},
                {image: '/resources/images/5.png'}
            ]
        });
        $('.download').hover(function () {
            $(this).find('span').stop(true, false).fadeIn(500);
        }, function () {
            $(this).find('span').stop(true, false).fadeOut(500);
        });
        $('.feedback').click(function () {
            $('.feedback-box').show();
        });
        $('.feedback-box .close').click(function(){
            $('.feedback-box').hide();
        });
        var clearInput = function () {
            $('.title-wt').val("");
            $('.name').val("");
            $('.tel').val("");
            $('.company').val("");
            $('.content').val("");
        };
        var time = null;
        var showTip = function (msg) {
            clearTimeout(time);
            $('.tip').html(msg).fadeIn(200);
            time = setTimeout(function () {
                $('.tip').fadeOut(1000);
            }, 2000);
        }
        $('.save').click(function () {
            var title = $('.title-wt').val();
            var name = $('.name').val();
            var tel = $('.tel').val();
            var company = $('.company').val();
            var content = $('.content').val();
            if (!title) {
                showTip("请填写标题");
                return false;
            }
            if (!content) {
                showTip("请填写内容");
                return false;
            }
            $.ajax({
                url: '/feedback/save',
                type: 'post',
                dataType: 'json',
                contentType: "application/json",
                data: JSON.stringify({
                    title: title,
                    name: name,
                    tel: tel,
                    company: company,
                    content: content
                }),
                success: function (data) {
                    if (data.status) {
                        showTip("反馈成功！");
                        clearInput();
                        $('.feedback-box').hide();
                    } else {
                        showTip("反馈失败！");
                    }
                },
                error: function () {
                    showTip("请求失败！");
                }
            });
        });
        $('.forgot').click(function(){
            $('.msg-box').show();
        });
        $('.msg-box .msg-close').click(function(){
            $('.msg-box').hide();
        });

        $('#randImg').click(function () {
            $(this).attr('src', '/validateCode?v=' + (new Date().getTime().toString()));
        });
    });
</script>
<script type="application/javascript">
    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }
    var service = getQueryString("service");
    document.getElementById("service").value = service;
</script>
</body>

</html>
